<template>
    <div class="box">
        <div class='main-nav'>
            <div class="main-title">萤火商城2.0</div>
            <el-scrollbar class="main-nav-scrollBar">
                <!-- <el-menu :default-active="mainNavActive"> -->
                <el-menu :default-active="mainNavActive">
                    <template v-for="item, index in mainNavList">
                        <el-menu-item :index="item.path || item.redirect" @click="mainNavClick(item)">
                            <el-icon class="main-nav-icon">
                                <component :is="mainIconList[index]"></component>
                            </el-icon>
                            <span>{{ item.permission_name }}</span>
                        </el-menu-item>
                    </template>
                </el-menu>
            </el-scrollbar>
        </div>
        <div class="main-container">
            <div class="header-nav">
                <div class="header-nav-left">
                    <el-icon @click="navStyleToggle">
                        <Operation />
                    </el-icon>
                    <el-icon @click="refreshData">
                        <RefreshRight />
                    </el-icon>
                    <el-breadcrumb separator="/" class="header-breadcrumb">
                        <el-breadcrumb-item v-for="i in headerBreadcrumbText">{{ i }}</el-breadcrumb-item>
                    </el-breadcrumb>
                </div>
                <div class="header-nav-right">
                    <el-popover placement="bottom-start" trigger="hover" :show-arrow='false' :offset=5>
                        <div class="header-nav-right-hover-item" @click="toSettingPage">
                            <el-icon>
                                <Setting />
                            </el-icon>
                            <div>账户设置</div>
                        </div>
                        <div class="header-nav-right-hover-item" @click="quit">
                            <el-icon>
                                <SwitchButton />
                            </el-icon>
                            <div>退出登录</div>
                        </div>
                        <template #reference>
                            <!-- 这里需要单元素 多元素只会渲染第一个 -->
                            <div>
                                <el-icon>
                                    <component is="User"></component>
                                </el-icon>
                                <span class="header-nav-right-username">{{ navData.admin_name }}</span>
                            </div>
                        </template>
                    </el-popover>
                </div>
            </div>
            <div class="container-outer">
                <div class="sub-nav">
                    <div class="sub-title">{{ subTitle }}</div>
                    <el-scrollbar class="sub-nav-scrollBar">
                        <el-menu v-if="subNavList.length > 0" :default-active="subNavActive">
                            <template v-for="item in subNavList">
                                <el-menu-item :index="item.path" @click="subNavClick(item)">
                                    <span class="shink">{{ item.permission_name }}</span>
                                </el-menu-item>
                            </template>
                        </el-menu>
                        <el-empty v-else description="No Data" :image-size="70" />
                    </el-scrollbar>
                </div>
                <el-scrollbar class="container-inner">
                    <RouterView v-slot="{ Component }">
                        <component :is="Component" :key="routerComponentKey" :tableTitle="tableTitle"></component>
                    </RouterView>
                    <div class="container-footer">
                        <span>Copyright © 2021 萤火科技 |</span><span class="container-footer-link">YIOVO.COM</span>
                    </div>
                </el-scrollbar>
            </div>
        </div>
    </div>
</template>
<script setup>
import { onBeforeMount, ref, onMounted, getCurrentInstance, defineAsyncComponent, watch } from 'vue';
import { onBeforeRouteLeave, onBeforeRouteUpdate } from 'vue-router';
import { ElMessageBox, ElMessage } from 'element-plus';
// import { storeToRefs } from 'pinia';
// import { piniaMainStore } from '../store/mainStore'
const { proxy } = getCurrentInstance()
// const pinaData = piniaMainStore() // 引入主仓库
// let { navInfo } = storeToRefs(pinaData) // 变为响应式

let navData = JSON.parse(window.localStorage.getItem('navData')) // 在本地的数据

let mainNavList = navData.permissions.filter((i) => { return i.parent_id === 0 }) // 主栏列表
let mainNavListTemp = [], mainNavListTempEnd = []
for (let i of mainNavList) { // 去重
    if (mainNavListTemp.indexOf(i['permission_name']) == -1) {
        mainNavListTemp.push(i['permission_name'])
        mainNavListTempEnd.push(i)
    }
}
mainNavList = mainNavListTempEnd

let mainIconList = ['HomeFilled', 'GoodsFilled', 'List', 'Avatar'] // 一级菜单图标 菜单长度变化后会报错 记得改 // icon用Setting的话 会卡顿 不知道为啥
let mainNavActive = ref('') // 主栏激活项

let subNavList = ref([]) //侧栏列表
let subTitle = ref() //侧栏标题
let subNavActive = ref()//侧栏激活项

let routerComponentKey = ref() //动态组件刷新key

let headerBreadcrumbText = ref([])//header面包屑数组

let loadWhich = ref(mainNavList[0])

let tableTitle = ref('0000')
mainNavClick(loadWhich.value)

watch(
    () => headerBreadcrumbText.value,
    (newVal, oldVal) => { document.title = 'CMS' + ' ' + headerBreadcrumbText.value.join('-'); },
    { immediate: true, deep: true }
)
// watch(
//     () => proxy.$route.path,
//     (newVal, oldVal) => {
//         console.log(newVal);
//         // mainNavActive.value = newVal.replace('/cms', '')
//     },
//     { deep: true }
// )

// onBeforeRouteUpdate((to, from, next) => {
//     console.log(to);
// })

function mainNavClick(e) { // 主栏点击 // e为当前一级菜单激活项的整条数据
    mainNavActive.value = e.path || e.redirect
    headerBreadcrumbText.value = [e.permission_name]
    subTitle.value = e.permission_name
    routerComponentKey.value = e.permission_id
    subNavList.value = navData.permissions.filter(i => { return i.parent_id == e.permission_id })
    let subNavListtemp = [], subNavListtempEnd = []
    for (let i of subNavList.value) { // 去重
        if (subNavListtemp.indexOf(i['permission_name']) == -1) {
            subNavListtemp.push(i['permission_name'])
            subNavListtempEnd.push(i)
        }
    }
    subNavList.value = subNavListtempEnd
    subNavActive.value = subNavList.value.length > 0 ? subNavList.value[0].path : undefined
    if (e.redirect) { subNavClick(navData.permissions.filter(i => { return i.path == e.redirect })[0]) }// redirect重定向到其子路径 这里为子菜单的第一项 
    else { proxy.$router.push({ path: '/cms/tbd' }) }// 若无则跳转到tbd页面
}
function subNavClick(e) { // 侧栏点击
    tableTitle.value = e.permission_name
    headerBreadcrumbText.value.splice(1, 1, e.permission_name) //只保留第一项 后面的全部替换
    proxy.$router.push({ path: '/cms' + e.path })
}
function navStyleToggle() { // 切换nav样式
    console.log('切换nav样式');
}
function refreshData() { // header刷新图标
    proxy.$router.go(0)
}
function quit() { // 退出按钮
    ElMessageBox.confirm('确定要注销登录吗？', '友情提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning', })
        .then(() => {
            window.localStorage.clear(); window.sessionStorage.clear()
            proxy.$router.push({ path: '/login' })
            ElMessage.success('已成功注销')
        })
        .catch(() => { ElMessage.success('已取消') })
}
function toSettingPage() { // 账户设置
    console.log('账户设置');
}

// if (subNavList.value.length > 0) { subNavActive.value = subNavList.value[0].path }
// else { subNavActive.value = undefined }
// setInterval(() => { console.log(headerBreadcrumbText.value); }, 1000)
// let routerComponentKey = ref(mainNavList[0].permission_id)

// let temp1 = undefined, temp2 = undefined
// watch(
//     () => navInfo.value,
//     (newVal, oldVal) => {
//         if (newVal.sub) {
//             temp2 = navData.filter(i => { return i.permission_id == newVal.sub })[0]
//             subBreadcrumbText.value = temp2.permission_name, breadcrumbSubPath.value = temp2.path
//         }
//         else { subBreadcrumbText.value = undefined, breadcrumbSubPath.value = undefined }
//         temp1 = navData.filter(i => { return i.permission_id == newVal.main })[0]
//         mainBreadcrumbText.value = temp1.permission_name, breadcrumbMainPath.value = temp1.redirect
//     },
//     { deep: true, immediate: true }
// )

// watch(
//     () => { proxy.$route },
//     (newValue, oldValue) => { console.log(newValue); },
//     { immediate: true, deep: true }
// )

// onBeforeRouteUpdate(to => { console.log(to); })
// const modules = import.meta.glob('./views/*/*.vue') // 批量引入组件
// for (let page in modules) {
//     modules[page]().then((i) => {
//         // console.log(i.default);
//         const file = i.default
//         proxy.$router.addRoute({ path: `/${file.name}`, component: file })
//     })
// }
</script>
<style scoped>
.box {
    display: flex;
    height: 100%;
    background-color: #F0F2F5;
}

.main-nav {
    background-color: #001529;
    color: #A6ADB4;
    z-index: 10;
}

.main-title {
    color: #FFF;
    cursor: pointer;
    display: flex;
    align-items: center;
    padding-left: 18px;
    font-weight: 400;
    font-size: 15px;
    height: 60px;
}

.main-nav-scrollBar {
    height: calc(100vh - 60px);
}

:deep() .el-menu {
    background-color: transparent;
    border: none;
}

.main-nav-scrollBar :deep() .el-menu-item {
    height: 40px;
    margin: 4px 0 8px 0;
    color: #A6ADB4;
    text-align: center;
    width: 160px;
}

.main-nav-scrollBar :deep() .el-menu-item:hover {
    background-color: transparent;
    color: #FFF;
}

.main-nav-scrollBar :deep() .is-active {
    background-color: #1890FF !important;
    color: #FFF;
}

.main-container {
    width: fit-content;
    height: 100vh;
    background-color: #F0F2F5;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.header-nav {
    min-width: fit-content;
    background-color: #fff;
    height: 64px;
    box-shadow: 0 1px 4px rgba(0, 21, 41, .08);
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 9;
    /* 这个position也用于修正z-index不生效 */
    position: relative;
    padding: 0 15px;
    font-size: 14px;
    color: rgba(0, 0, 0, .65);
    white-space: nowrap;
}

.header-nav-left :deep() .el-icon {
    width: 16px;
    cursor: pointer;
    padding: 0 12px;
    height: 64px;
}

.header-nav-left {
    display: flex;
    align-items: center;
}

.header-breadcrumb :deep() {
    margin-left: 45px;
    line-height: 64px;
    white-space: nowrap;
    display: flex;
}

.header-breadcrumb :deep() :not(:last-child) * {
    color: rgba(0, 0, 0, .45);
}

.header-breadcrumb :deep() .el-breadcrumb__separator {
    font-weight: normal;
}

.header-nav-right {
    line-height: 64px;
    transition: all .3s;
    padding: 0 10px;
    cursor: pointer;
}

.header-nav-right:hover {
    background-color: #F9F9F9;
}

.header-nav-right :deep() .el-icon {
    width: 16px;
    padding: 0 5px;
}

.header-nav-right-username {
    overflow: hidden;
    max-width: 200px;
    display: inline-block;
    text-overflow: ellipsis;
    vertical-align: top
}

.header-nav-right-hover-item {
    transition: all .3s;
    margin: 5px 0;
    padding: 5px 24px;
    box-sizing: border-box;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 3px;
}

.header-nav-right-hover-item:hover {
    background-color: #E6F7FF;
}

.container-outer {
    height: calc(100% - 64px);
    display: flex;
}

.sub-title {
    height: 50px;
    line-height: 55px;
    padding-left: 26px;
    font-size: 14px;
    color: #333;
    cursor: not-allowed;
}

.sub-nav {
    /* width: 0; */
    overflow: hidden;
    width: 120px;
    background-color: #FFFFFF;
    box-shadow: 2px 0 8px 0 rgba(29, 35, 41, .05);
    flex-shrink: 0;
    height: calc(100vh - 64px);
    z-index: 8;
}

.sub-nav-scrollBar :deep() {
    min-width: fit-content;
    height: calc(100% - 50px);
}

.sub-nav-scrollBar :deep() .el-menu-item {
    height: 40px;
    color: #333;
    font-size: 13px;
    padding-left: 26px !important;
}

.sub-nav-scrollBar :deep() .el-menu-item:hover {
    background: #f5f5f5;
    color: #40a9ff;
}

.sub-nav-scrollBar :deep() .is-active {
    background: #f5f5f5;
    color: #333;
}

.container-inner {
    flex-grow: 1;
    display: flex;
}

.container-inner :deep()>.el-scrollbar__wrap {
    flex-grow: 1;
}

.container-inner :deep()>div>.el-scrollbar__view {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    justify-content: space-between;
}

.container-inner :deep()>div>.el-scrollbar__view>div {
    flex-grow: 0;
    flex-shrink: 0;
}

.container-footer {
    text-align: center;
    line-height: 83px;
    padding: 24px 50px;
    color: rgba(0, 0, 0, .45);
    white-space: nowrap;
    font-size: 14px;
    box-sizing: border-box;
    width: 100%;
}

.container-footer-link {
    margin-left: 6px;
    color: #1890ff;
    cursor: pointer;

}
</style>